import { defineComponent } from "vue";
import Button from "@/components/Button";
import CountDown from "@/components/CountDown";
import Counter from "@/components/Counter";
import HelloWorld from "@/components/HelloWorld";
import Icon from "@/components/Icon";
import Panel from "@/components/Panel";
import ComputedDemo from "@/demo/ComputedDemo";
import InputDemo from "@/demo/InputDemo";
import WatchDemo from "@/demo/WatchDemo";

const DemoView = defineComponent({
  setup() {
    document.title = "DEMO";
    return () => (
      <div>
        <HelloWorld />
        <Icon icon="home" style={{ fontSize: "32px" }} />
        <Panel>
          {{
            title: () => <h2>Title</h2>,
            default: () => (
              <>
                Body
                <div>Body</div>
              </>
            ),
          }}
        </Panel>
        <Button
          onClick={() => {
            console.log("a");
          }}
        >
          <Icon icon="smile" /> Click Me
        </Button>
        <Counter />
        <ComputedDemo />
        <CountDown start={5} onDone={() => console.log("Done")} />
        <InputDemo />
        <WatchDemo />
      </div>
    );
  },
});

export default DemoView;
